<template>
	<view>
		<view class="need-content">
			<view class="con-view">
				<view class="left-label fl text-left">圈子名称<text class="red-text">*</text></view>
				<view class="right-input fl">
					<input class="uni-input" placeholder-class="p-class" v-model="groupName" placeholder="请输入圈子名称" />
				</view>
			</view>
			<view class="con-view">
				<view class="left-label fl text-left">联系电话</view>
				<view class="right-input fl">
					<input class="uni-input" placeholder-class="p-class" v-model="linkMobile" placeholder="方便其他人联系您" />
				</view>
			</view>
		</view>
		<view class="need-form">
			<view class="form-title">进圈子需完善信息<text class="yulan" @tap="previewForm">预览效果</text></view>
			<view class="diy-form">
				<show-form ref="show_form" :itemList="formData" @change="selFormDataChange"></show-form> 
			</view>
			<view class="add-tip" @tap="showSelForm" v-if="join_count < 1">+添加设置内容</view>
			
			
			<view class="zhanwei"></view>
		</view>
		<view class="sub-button" :class="(join_count > 0)?'sub-button-disabled':''"  v-if="submitCreateStatus == true" @tap="submitCreate">
		{{(join_count > 0)?'已有'+join_count+'人加入，无法修改':'立即保存'}}
			</view>
		<view class="zhanwei"></view>
		<view>
			<sel-form ref="sel_form" @selectType="selFormData"></sel-form>
		</view>
	</view>
</template>

<script>
	import selForm from "@/components/diy-form/sel-form.vue";
	import showForm from "@/components/diy-form/show-form.vue";
	export default {
		components:{
			selForm,
			showForm
		},
		data() {
			return {
				join_count:0,
				circle_id:0,
				groupName:'', //群组名称
				linkMobile:'', //联系电话
				formData:[],
				endData:[],
				submitCreateStatus:false,
			}
		},
		onLoad(params){
			this.circle_id = params.circle_id?params.circle_id:0;
			this.getInfo();
		},
		onShow(){
			this.$refs.show_form.parentSetUsername();
		},
		methods: {
			getInfo(){
				var that = this;
				if(that.circle_id > 0) 
				{
					that.$http.post('circle/getUserCircleInfo',{
						circle_id:that.circle_id
					}).then(res=>{
						if(res.code == 1)
						{
							var info = res.data.info;
							if(info.formlist)
							{
								that.formData = JSON.parse(info.formlist)
							}
							that.groupName = info.name;
							that.linkMobile = info.link_mobile;
							that.join_count = info.join_count;
							that.submitCreateStatus = true;
						}else{
							that.$api.msg(res.msg);
						}
					})
				}
			}, 
			async submitCreate(){
				var that = this;
				if(that.join_count > 0)
				{
					return ;
				}
				var checkLogin = that.$api.checkLogin(true);
				if(checkLogin == false)
				{
					that.$api.navigateTo('/pages/member/login');return ;
				}
				var groupName = that.groupName.trim();
				if(!groupName || groupName == '')
				{
					that.$api.msg('请填写圈子名称');return ;
				}
				var linkMobile = that.linkMobile.trim();
				if(linkMobile && !that.$api.isPhoneNumber(linkMobile))
				{
					that.$api.msg('请填写正确的手机号');return;
				}
				 
				that.$api.showModal('是否确认编辑','', async function(res){
					if(res == 'yes')
					{
						
					var text = '';
					var formList = [];
					if(that.formData.length > 0)
					{
						var dataList = that.$refs.show_form.getItemList();
						if(dataList.length > 0)
						{
							formList = that.$api.opeDiyFormData(dataList);
						}
						if(formList.length < 1)
						{
							return false;
						}
						text = that.$refs.show_form.getItemListText();
					}
					var need_check_text = groupName +','+ linkMobile +','+ text;
					if(need_check_text)
					{
						var res = await that.$api.checkQiniuText(need_check_text);
						var checkRes = res;
						if(!res.status)
						{
							return ;
						}
					}	
						
						that.$api.loadingMsg('正在修改');
						that.$http.post('Circle/editUserCircleInfo',{
							circle_id:that.circle_id,
							groupName,linkMobile,formList,
							checkRes:checkRes?checkRes:''
						}).then(res=>{
							that.$api.msg(res.msg);
						})
					}
				})
			},
			previewForm(){
				var dataList = this.$refs.show_form.getItemList();
				var opeList = this.$api.opeDiyFormData(dataList);
				if(opeList.length < 1)
				{
					return;
				}
				uni.setStorageSync('common-preview-cache-data',opeList);
				this.$api.navigateTo('/pages/common/preview-form');
			},
			showSelForm(){
				this.$refs.sel_form.tggleStatus(true);
			},
			selFormData:function(info){
				if(info)
				{
					this.$refs.show_form.changeItemlist();
					this.formData.push(info);
				}
			},
			selFormDataChange(data){
				this.formData = data;
			},
		},
		
	}
</script>

<style lang="scss">
	
	.sub-button{
		width: 90%;
		margin: 20rpx auto;
		height: 80rpx;
		background:$uni-btn-color;
		border-radius: 60rpx;
		text-align: center;
		line-height: 80rpx;
		font-size: 28rpx;
		letter-spacing: 6rpx;
		color: #FFFFFF;
	}
	.sub-button-disabled{
		background: #999999;
		letter-spacing:0rpx;
	}
	.need-form{
		margin: 20rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		.form-title{
			height: 80rpx;
			font-size: 30rpx;
			font-weight: 600;
			line-height: 80rpx;
			padding-left: 20rpx;
			.yulan{
				float: right;
				margin-right: 40rpx;
				font-size: 24rpx;
				background: #728DB5;
				height: 50rpx;
				line-height: 50rpx;
				width: 150rpx;
				color: #ffffff;
				font-weight: normal;
				text-align: center;
				border-radius: 15rpx;
				margin-top: 20rpx;
			}
		}
		.add-tip{
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 26rpx;
			color: #6CA1D0;
		}
	}
	.need-content{
		margin: 20rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		.red-text{
			color: red;
			font-size: 28rpx;
		}
		.con-view{
			height: 80rpx;
			padding:10rpx 10rpx 10rpx 20rpx;
			.p-class{
				font-size: 24rpx;
			}
			.left-label{
				width: 25%;
				height: 100%;
				line-height: 60rpx;
				font-size: 28rpx;
			}
			.right-input{
				width: 75%;
				height: 100%;
				.uni-input{
					height: 100%;
					line-height: 60rpx;
					width: 90%;
				}
			}
		}
	}
</style>
